<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>07CSS스프라이트</title>
	</head>

	<body>
		<h1>CSS스프라이트sprite</h1>
		<p>스프라이트 이미지는 사이트에 사용하는 모든 이미지를 하나의  이미지 파일에 만들어 두고 좌표를 이용해 특정 부위의 이미지만 보여주는 기법</p>
		<p>웹에서 각각의 이미지를 불러오려면 http요청이 여러번 발생되고 내려받는데 시간이 소요되므로 전체 사이트 로딩시간이 지연됨<br/>
			http 요청 발생으로 인해 웹 서버 자원 사용비용이 증가함
		</p>
		<p>CSS 스프라이트 기법을 사용하면 이러한 담점을 해결할 수 있음</p>
		<hr/>
		
		<div style="width:134px; height: 44px; background-image:  url('images/sprites.gif');"> </div>
		<div style="width:46px; height: 44px; background-image:  url('images/sprites.gif'); "> </div>
		<div style="width:43px; height: 44px; background-image:  url('images/sprites.gif'); background-position:-47px 0;"> </div>
		<div style="width:134px; height: 44px; background-image:  url('images/sprites.gif'); background-position:43px 0;"> </div>
	<!-- glyphicons.com 아이콘 무료제공 사이트-->
		<hr/>
		<div style="width:34px; height: 30px; background-image:  url('images/iconsprite.PNG'); background-position:-107px -65px;"> </div>	
		<div style="width:34px; height: 30px; background-image:  url('images/iconsprite.PNG'); background-position:-107px -210px;"> </div>	
		<div style="width:34px; height: 30px; background-image:  url('images/iconsprite.PNG'); background-position:-58px -260px;"> </div>	
		<hr/>
		
	
	</body>
</html>
